<template>
  <el-dialog class="public-dialog" :title="title" :width="width" :modelValue="modelValue" @close="handleClose" draggable align-center append-to-body>
    <div>
      <div class="grid grid-cols-4 py-[8px]">
        <VText v-for="item in infoColumn" :key="item.value" :title="item.label" :value="info[item.value]" line="1" />
      </div>
      <vxe-grid v-bind="gridOptions" ref="tableRef" />
      <div v-if="tips" class="flex text-[12px] text-[#9DA1AD] leading-[17px] whitespace-pre-wrap mt-[16px]">
        <span class="flex flex-shrink-0 mr-[2px]">图标</span>
        <div v-html="tips" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="primary" @click="handleClose"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import XForm from "@/components/XForm/index.vue"
import { nextTick } from "vue"
const props = defineProps({
  title: { type: String, default: "" },
  width: { type: String, default: "1000" },
  info: { type: Object, default: () => ({}) },
  infoColumn: { type: Array, default: () => [] },
  tableOptions: {
    type: Object,
    default: () => ({
      border: true,
      columns: [],
      data: [],
    }),
  },

  modelValue: { type: Boolean, default: false },
  rules: { type: Object, default: () => ({}) },
  tips: { type: String, default: "" },

  inputLabel: { type: String, default: "" },
  originOption: { type: Object, default: () => ({}) },
  formOptions: { type: Object, default: () => ({ labelPosition: "top" }) },
  form: { type: Object, default: () => ({}) },
})

const emit = defineEmits(["update:modelValue", "submit"])

const form = ref()
const formData = ref({})
const fieldList = ref([])
const gridOptions = ref({})
const tableRef = ref()
watch(
  () => props.modelValue,
  (val) => {
    // console.log(88888)
    // console.log(val)
    // console.log(props.tableOptions)
    if (val) {
      gridOptions.value = props.tableOptions
      nextTick(() => {
        tableRef?.value?.updateData()
        // console.log(tableRef);
      })
    }
  }
)

const handleClose = () => {
  // console.log(11111);
  emit("update:modelValue", false)
  // form.value.resetForm()
}

// const formOptions = {
//   labelPosition: 'top',
// }
</script>
